/*
 * 选区UI
 */
import * as React from 'react';
import './CropBox.css';

interface CropBoxProps {
  x: number;
  y: number;
  w: number;
  h: number;
  visible: boolean;
}

const defaultProps: CropBoxProps = {
  x: 0,
  y: 0,
  w: 0,
  h: 0,
  visible: false,
};

const CropBox: React.SFC<CropBoxProps> = props => {
  const { x, y, w, h, visible } = props;
  if (!visible || !w || !h) {
    return null;
  }

  return (
    <div
      className="cropper-crop-box"
      style={{
        width: w,
        height: h,
        transform: `translate(${x}px, ${y}px)`,
      }}>
      <span className="cropper-view-box" />
      <span className="cropper-dashed dashed-h cropper-hidden" />
      <span className="cropper-dashed dashed-v cropper-hidden" />
      <span className="cropper-center" />
      <span className="cropper-face cropper-move" data-action="all" />
      <span className="cropper-line line-e" data-action="e" />
      <span className="cropper-line line-n" data-action="n" />
      <span className="cropper-line line-w" data-action="w" />
      <span className="cropper-line line-s" data-action="s" />
      <span className="cropper-point point-e" data-action="e" />
      <span className="cropper-point point-n" data-action="n" />
      <span className="cropper-point point-w" data-action="w" />
      <span className="cropper-point point-s" data-action="s" />
      <span className="cropper-point point-ne" data-action="ne" />
      <span className="cropper-point point-nw" data-action="nw" />
      <span className="cropper-point point-sw" data-action="sw" />
      <span className="cropper-point point-se" data-action="se" />
    </div>
  );
};

CropBox.defaultProps = defaultProps;

export default CropBox;
